<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>效能统计</title>
	<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.css"
		  th:href="@{/agcloud/framework/js-lib/element-2/element.css}">
	<link rel="stylesheet" href="../../static/civicism/css/reset_wt.css" th:href="@{/civicism/css/reset_wt.css}">
	<link rel="stylesheet" href="../../static/civicism/css/base_wt.css" th:href="@{/civicism/css/base_wt.css}">
	<link rel="stylesheet"
		  href="/framework-ui/src/main/resources/static/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css"
		  th:href="@{/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css}">
	<link rel="stylesheet" href="../../static/civicism/css/effectStatistics.css" th:href="@{/civicism/css/effectStatistics.css}">
	<!--引入样式-->
	<!--<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/metronic-5/vendors.bundle.css" th:href="@{/agcloud/framework/js-lib/metronic-5/vendors.bundle.css}">
	<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/common/css/metronic.css" th:href="@{/agcloud/framework/ui-private/default/common/css/metronic.css}">
	<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.css" th:href="@{/agcloud/framework/js-lib/element-2/element.css}">
	<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/common/css/layout.css" th:href="@{/agcloud/framework/ui-private/default/common/css/layout.css}">
	<link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/ui-private/default/blue/css/theme.css" th:href="@{/agcloud/framework/ui-private/default/blue/css/theme.css}">
-->
	<script>
		var ctx = "[[@{/}]]";
	</script>
</head>
<body>
<!--<th:block th:include="common/common :: wtheader" />-->
<div
	class="wt-tab effectStatistics"
	id="effectStatistics"
	v-cloak
	v-loading="loading">

	<div class="flex-box bg-white effectStatistics-top">
		<!--<p class="flex-1 font-24 city-name">广东·珠海市</p>-->
		<p class="flex-1 font-24 city-name">
			<span>{{dicRegionFirst.regionName}}</span>
			<el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <span>{{searchForm.curRegion}}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
				<el-dropdown-menu class="region-drop" slot="dropdown">
					<el-dropdown-item :class="searchForm.regions.indexOf(item.regionId)!==-1&&'active'" :command="item" v-for="(item, index) in dicRegions" :key="index">{{item.regionName}}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</p>
		<div class="flex-box mr15">
			<div class="top-time" v-show="startTime&&endTime">
				<p>统计时间为{{startTime}}至{{endTime}}</p>
			</div>
			<el-button-group class="date-type">
				<el-button :class="dateActive === 'month'&&'date-active'" @click="changeDate('month')">本月</el-button>
				<el-button :class="dateActive === 'quarter'&&'date-active'" @click="changeDate('quarter')">本季度</el-button>
				<el-button :class="dateActive === 'year'&&'date-active'" @click="changeDate('year')">本年</el-button>
				<el-button :class="dateActive === 'all'&&'date-active'" @click="changeDate('all')">总览</el-button>
			</el-button-group>
			<div class="date-picker flex-box" >
				<el-date-picker
						v-model="startTime"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd"
						:clearable="false"
						@change="changeDate('dateRange')">
				</el-date-picker>
				<span class="range-separator">至</span>
				<el-date-picker
						v-model="endTime"
						type="date"
						placeholder="选择日期"
						value-format="yyyy-MM-dd"
						@change="changeDate('dateRange', 'endTime')">
				</el-date-picker>
			</div>
		</div>
	</div>
    <!--宽度用时，办件情况 及 报装概况-->
	<div class="wt-content">
		<!--跨度用时-->
		<div class="statis-con" v-loading="totalLoading">
			<div class="statis-tab">
				<el-button-group class="date-type">
					<el-button :class="hasOutLine === '1'&&'date-active'" @click="changeHasOutLine('1')">有外线工程</el-button>
					<el-button :class="hasOutLine === '0'&&'date-active'" @click="changeHasOutLine('0')">无外线工程</el-button>
				</el-button-group>
			</div>
			<ul class="flex-box statis-box" style="min-width: 1380px;">
				<li class="statis-item svg-bg1">
					<div class="graid-img"></div>
					<p class="item-title color-fff">平均逾期率</p>
					<div class="flex-box justify-content-between pl15 pr15">
						<p class="item-num color-fff">
							{{overRate.overRate}}%
						</p>
						<img style="width: 50px;height: 50px;" class="iconsin"
							 :src="ctx+ 'civicism/images/effectStatistics/gover.svg'"
						>
					</div>
					<div class="item-bottom">
						<div class="item-line"></div>
						<div class="clearfix">
							<p class="item-des fl">
								<span class="color-fff">办结总数&nbsp;&nbsp; {{overRate.itemCompleteNum}}</span>
							</p>
							<p :class="['item-des', 'icon-des', 'fr', eabzTotalVo.monthTrend==='-1'&&'down-css']">
							<span class="color-fff">逾期数&nbsp;&nbsp;
								{{overRate.overItemsNum}}
							</span>
							</p>
						</div>
					</div>
				</li>
				<li class="statis-item" :class="['svg-bg'+(index+2)]" v-for="(item,index) in spanTimes">
					<p class="item-title" v-if="item.categoryType === '01'">供水跨度用时</p>
					<p class="item-title" v-else-if="item.categoryType === '02'">供电跨度用时</p>
					<p class="item-title" v-else-if="item.categoryType === '03'">燃气跨度用时</p>
					<p class="item-title" v-else>通信跨度用时</p>
					<div class="flex-box justify-content-between pl15 pr15">
						<p class="item-num">
							{{item.avgSpanTime}}<span class="time-type">天</span>
						</p>
						<img class="iconsin" v-if="item.categoryType === '01'"
							 :src="ctx+ 'civicism/images/effectStatistics/water.svg'"
						>
						<img class="iconsin" v-else-if="item.categoryType === '02'"
							 :src="ctx+ 'civicism/images/effectStatistics/electricity.svg'"
						>
						<img class="iconsin" v-else-if="item.categoryType === '03'"
							 :src="ctx+ 'civicism/images/effectStatistics/fire.svg'"
						>
						<img class="iconsin" v-else
							 :src="ctx+ 'civicism/images/effectStatistics/communication.svg'"
						>
					</div>
					<div class="item-bottom">
						<div class="item-line"></div>
						<div class="clearfix">
							<!--<p class="item-des fl">
								<span>办结数&nbsp;&nbsp; {{item.completeNum}}</span>
							</p>
							<p :class="['item-des', 'icon-des', 'fr', eabzTotalVo.monthTrend==='-1'&&'down-css']">
							<span>月环比
								<i :class="eabzTotalVo.monthTrend==='-1'?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
								{{item.monthRingGit}}%
							</span>
							</p>-->
							<p class="item-des fl">
								<span>办结数&nbsp;&nbsp; {{item.completeNum}}</span>
							</p>
							<p :class="['item-des', 'icon-des', 'fr', eabzTotalVo.monthTrend==='-1'&&'down-css']">
							<span>审批用时 &nbsp; &nbsp; {{parseInt(item.avgApproveTime)}}
							</span>
							<span class="color-5A5B64"> &nbsp;&nbsp;工作日</span>
							</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--办件情况，报装概况-->
		<div class="mt24  banjian-c" v-loading="analysisLoading">
			<div class="flex-box">
				<div class="banjian-left">
					<p class="title-p">
						办件情况
					</p>
					<el-tabs v-model="activeName" @tab-click="tabClick">
						<el-tab-pane label="报装接入" name="szbz">
							<ul class="flex-box tab-ul">
								<li style="width:46%;position: relative;">
									<div class="circle-chart" id="pieChart"></div>
									<div class="custom-graphic-tooltip">
										<div class="item">
											<div class="name">报装办件数</div>
											<div class="num">
												<p class="num-text">{{itemNums}}
													<span class="num-text-unit">件</span></p>
												<span class="num-des">含{{outlineRate}}有外线工程</span>
											</div>
										</div>
										<div class="item">
											<div class="name">报装申报数</div>
											<div class="num">
												<p class="num-text">{{applyNum}}
													<span class="num-text-unit">件</span></p>
												<span class="num-des">含{{unitApplyRate}}联合报装</span>
											</div>
										</div>
										<div class="triangle">
										</div>
									</div>
								</li>
								<li style="width:54%;">
									<el-table
											class="sz-table"
											:data="regionList"
											style="width: 100%"
											:row-class-name="tableRowClassName">
										<el-table-column
												prop="regionName"
												label="地区">
										</el-table-column>
										<el-table-column
												prop="regionTotal"
												sortable
												label="总数">
										</el-table-column>
										<el-table-column
											v-for="item in categoryTypes"
												:prop="item.value"
												sortable
												:label="item.label +'报装'">
										</el-table-column>
										<!--<el-table-column
												prop="gdbzTotal"
												sortable
												label="供电报装">
										</el-table-column>
										<el-table-column
												prop="gqbzTotal"
												sortable
												label="供气报装">
										</el-table-column>-->
									</el-table>
								</li>
							</ul>
						</el-tab-pane>
						<el-tab-pane label="外线工程" name="wxgc">
							<ul class="flex-box tab-ul">
								<li  style="width:46%;position: relative">
									<div class="circle-chart" id="outPieCahrt"></div>
								</li>
								<li  style="width:54%; ">
									<el-table
											class="sz-table"
											:data="regionList"
											style="width: 100%"
											:row-class-name="tableRowClassName">
										<el-table-column
												prop="regionName"
												label="地区">
										</el-table-column>
										<el-table-column
											prop="regionTotal"
											sortable
											label="总数">
										</el-table-column>
										<el-table-column
											v-for="item in categoryTypes"
											:prop="item.value"
											sortable
											:label="item.label +'接驳'">
										</el-table-column>
										<!--<el-table-column
												prop="gsjbTotal"
												sortable
												label="供水接驳">
										</el-table-column>
										<el-table-column
												prop="gdjbTotal"
												sortable
												label="供电接驳">
										</el-table-column>
										<el-table-column
												prop="gqjbTotal"
												sortable
												label="供气接驳">
										</el-table-column>-->
									</el-table>
								</li>
							</ul>
						</el-tab-pane>
					</el-tabs>
				</div>

				<div class="banjian-rirght">
					<p class="title-p">
						市政报装概况
						<span class="title-des">近6个月</span>
					</p>
					<div id="general-situation">

					</div>
					<p class="title-p">企业满意度</p>
					<div id="enterprise-satisfaction">

					</div>
					<div class="month-per">
						<div>
							<p :class="['item-des', 'icon-des', 'fr', eawxjbTotalVo.monthTrend==='-1'&&'down-css']">
							<div class="month-per-item">
								<p class="month-per-text">月环比</p>
								<i :class="Number(ringGit) <=0?'el-icon-caret-bottom':'el-icon-caret-top'" style="font-size:18px;margin-top: 8px;"></i>
								<span :class="Number(ringGit) <=0?'color-73E7BE':'color-f57270'">{{Math.abs(Number(ringGit))}}%</span>
							</div>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--市政审批情况-->
		<div class="approve-position" v-loading="approveInfoLoading">
			<p class="title-p">市政审批情况</p>
			<ul class="baozhuang flex-box">
				<li class="flex-box">
					<img th:src="@{/civicism/images/effectStatistics/approve_icon1.png}">
					<div>
						<p  class="minwidth">
							<span class="item-num">{{itemCompleteNum || 0}}</span>
							件
						</p>
						<p class="baozhuang-name">办结总数</p>
					</div>
				</li>
				<li class="flex-box">
					<img th:src="@{/civicism/images/effectStatistics/approve_icon2.png}">
					<div>
						<p class="minwidth">
							<span class="item-num">{{avgApproveTime || 0}}</span>
							个工作日
						</p>
						<p class="baozhuang-name">平均审批用时</p>
					</div>
				</li>
				<li class="flex-box">
					<img th:src="@{/civicism/images/effectStatistics/approve_icon3.png}">
					<div>
						<p class="minwidth">
							<span class="item-num">{{overDateRate || 0}}</span>
							%
						</p>
						<p class="baozhuang-name">逾期率</p>
					</div>
				</li>
				<li class="flex-box">
					<img th:src="@{/civicism/images/effectStatistics/approve_icon4.svg}">
					<div>
						<p class="minwidth">
							<span class="item-num">{{avgSpanTime || 0}}</span>
							天
						</p>
						<p class="baozhuang-name">平均跨度用时</p>
					</div>
				</li>
			</ul>
			<div class="approve-time">
				<div class="approveTime-chart" id="approveTime">
				</div>
				<ul class="category-box clearfix flex-box justify-content-center">
					<li class="fl category-item" :class="['category-item'+index,activeCategoryIndex == index? 'active-category':'']"
						:title="item.label" v-for="(item,index) in categoryTypes" v-if="unitApproveTimes[item.value]"  @click="categoryTypesChange(item,index)">
					</li>
				</ul>
			</div>
		</div>
		<!--主动服务-->
		<div class="auto-service approve-position">
			<p class="title-p">主动服务</p>

			<div class="picScroll-left">
				<div class="hd swiper-button-box">
					<div class="prev swiper-button"  @click="preButtonClick">
						<i class="el-icon-arrow-left"></i>
					</div>
					<div class="next swiper-button"  @click="nextButtonClick">
						<i class="el-icon-arrow-right"></i>
					</div>
				</div>
				<div class="bd">
					<div class="temWrap">
						<ul class="picList">
							<li class="unit-item"  v-for="(item,index) in unitServes" :key="index">
								<div class="unit-l">
									<img class="categoryType-icon" v-if="item.categoryType === '01'" th:src="@{/civicism/images/effectStatistics/shui-icon.png}">
									<img class="categoryType-icon" v-else-if="item.categoryType === '02'" th:src="@{/civicism/images/effectStatistics/dian-icon.png}">
									<img class="categoryType-icon" v-else-if="item.categoryType === '03'" th:src="@{/civicism/images/effectStatistics/qhi-icon.png}">
									<img class="categoryType-icon" v-else th:src="@{/civicism/images/effectStatistics/tongxin-icon.png}">
									<div class="unit-title ellipsis" v-text="item.applicant">
									</div>
									<div class="unit-service">
										<p class="unit-service-des">服务次数</p>
										<p class="unit-service-num" v-text="item.serveNum"></p>
									</div>
								</div>
								<div class="unit-r">
									<el-progress type="circle" :percentage="Number(parseFloat(item.rate).toFixed(2))" :stroke-width="10" :color="customColorMethod(item)" style="width: 80px;height: 80px;"></el-progress>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<ul class="flex-box date-active-box" v-show="dateActive == 'month'">
				<li>
					<p>主动服务总数</p>
					<p>
						<span>{{indicator.allCounts||0}}</span>次
					</p>
				</li>
				<li>
					<p>月环比</p>
					<p class="auto-service-p">
						<span>{{Math.abs(indicator.growthRate)||'0%'}}</span>
						<img :src="indicator.growth?(ctx+'civicism/images/effectStatistics/active_service_up.svg'):(ctx+'civicism/images/effectStatistics/active_service_down.svg')"/>
					</p>
				</li>
				<li>
					<p>本月新增</p>
					<p>
						<span>{{indicator.thisMonthCounts>0?indicator.thisMonthCounts:0}}</span>次
					</p>
				</li>
			</ul>
			<ul class="flex-box date-active-box"  v-show="dateActive == 'quarter'">
				<li>
					<p>主动服务总数</p>
					<p>
						<span>{{indicator.allCounts||0}}</span>次
					</p>
				</li>
				<li>
					<p>季度环比</p>
					<p class="auto-service-p">
						<span>{{Math.abs(indicator.growthRate)||'0%'}}</span>
						<img :src="indicator.growth?(ctx+'civicism/images/effectStatistics/active_service_up.svg'):(ctx+'civicism/images/effectStatistics/active_service_down.svg')"/>
					</p>
				</li>
				<li>
					<p>本季新增</p>
					<p>
						<span>{{indicator.thisMonthCounts>0?indicator.thisMonthCounts:0}}</span>次
					</p>
				</li>
			</ul>
			<ul class="flex-box date-active-box" v-show="dateActive == 'year'">
				<li>
					<p>主动服务总数</p>
					<p>
						<span>{{indicator.allCounts||0}}</span>次
					</p>
				</li>
				<li>
					<p>年环比</p>
					<p class="auto-service-p">
						<span>{{Math.abs(indicator.growthRate)||'0%'}}</span>
						<img :src="indicator.growth?(ctx+'civicism/images/effectStatistics/active_service_up.svg'):(ctx+'civicism/images/effectStatistics/active_service_down.svg')"/>
					</p>
				</li>
				<li>
					<p>本年新增</p>
					<p>
						<span>{{indicator.thisMonthCounts>0?indicator.thisMonthCounts:0}}</span>次
					</p>
				</li>
			</ul>
			<ul class="flex-box date-active-box" v-show="dateActive == 'all'">
				<li>
					<p>主动服务总数</p>
					<p>
						<span>{{indicator.allCounts||0}}</span>次
					</p>
				</li>
				<li>
					<p>月环比</p>
					<p class="auto-service-p">
						<span>{{Math.abs(indicator.growthRate)||'0%'}}</span>
						<img :src="indicator.growth?(ctx+'civicism/images/effectStatistics/active_service_up.svg'):(ctx+'civicism/images/effectStatistics/active_service_down.svg')"/>
					</p>
				</li>
				<li>
					<p>本月新增</p>
					<p>
						<span>{{indicator.thisMonthCounts>0?indicator.thisMonthCounts:0}}</span>次
					</p>
				</li>
			</ul>
			<ul class="flex-box date-active-box" v-show="dateActive == 'dateRange'">
				<li>
					<p>主动服务总数</p>
					<p>
						<span>{{indicator.allCounts||0}}</span>次
					</p>
				</li>
			</ul>
			<div class="h450" id="lineChart" v-loading="lineLoading"></div>
		</div>
	</div>
</div>



<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/jquery-v1/jquery.min.js" th:src="@{/agcloud/framework/js-lib/jquery-v1/jquery.min.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/vue-v2/vue.js" th:src="@{/agcloud/framework/js-lib/vue-v2/vue.js}"></script>
<!-- 引入组件库 -->
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.js" th:src="@{/agcloud/framework/js-lib/element-2/element.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/js/common.js" th:src="@{/agcloud/framework/js-lib/agcloud-lib/js/common.js}"></script>
<script src="../../../../../static/agcloud/opus/admin/common/js/axios.min.js" type="text/javascript" th:src="@{/agcloud/opus/admin/common/js/axios.min.js}"></script>


<script th:src="@{/agcloud/framework/js-lib/echarts-v4/echarts.min.js}"></script>
<script src="../../static/civicism/js/effectStatistics.js" th:src="@{/civicism/js/effectStatistics.js}" type="text/javascript"></script>

</body>
</html>